import React, {useEffect,useState} from "react";
import { Card, message } from 'antd';
import * as PublicConfiguration from '@utils/PublicConfiguration'; // 使用 * as 导入整个模块
import IndexTopForm from './components/IndexTopForm'
import IndexTable from './components/IndexTable'
import IndexAddEidtForm from './components/IndexAddEidtForm';
import IndexPagination from '@Components/ComponentsPagination'
import './index.scss';
import {
  Get_Commodity_Table_Data_Api, // 获取商品表格数据API
  POST_Delete_Commodity_Table_Data_Api, // 删除商品表格数据API
  POST_Add_Commodity_Table_Data_Api, // 商品表格数据新增
  POST_Edit_Commodity_Table_Data_Api // 商品表格数据编辑
} from '@Api/CommodityApi'

// 创建组件,使用hooks
const CommodityIndex =  () => {
  const [dataSource, setDataSource] = useState([]) // 表格数据
  const [Visible, setVisible] = useState(false); // 新增/编辑弹窗
  const [IndexPaginationKey, setIndexPaginationKey] = useState(0); // 搜索关键字
  const [IndexAddEidtTypeObject, setIndexAddEidtTypeObject] =useState({
    ModalType: '',
    RowData: {}
  })
  
  /**
   * @date: 2024-10-06 20:27:20
   * @description: 搜索
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const onSearchClick = (event) => {
    console.log('onSearchClick', event)
    setIndexPaginationKey(prevKey => prevKey + 1); // 更新 IndexPaginationKey 状态
    Get_Commodity_Table_Data(event.keyword ? event.keyword : '', defaultCurrent, PublicConfiguration.limit) // 获取表格数据
  };
  /**
   * @date: 2024-10-06 20:28:06
   * @description: 新增表格数据
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const onAddClick = (event) => {
    setIndexAddEidtTypeObject({
      ModalType: 'add',
      RowData: {}
    })
    console.log('新增表格数据', event);
    setVisible(!Visible);
  };
  
  /**
   * @date: 2024-10-06 20:29:03
   * @description: 编辑表格数据
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const onEditClick = (event) => {
    setIndexAddEidtTypeObject({
      ModalType: 'edit',
      RowData: event
    })
    setVisible(!Visible);
  };
  /**
   * @date: 2024-10-06 20:28:53
   * @description: 新增/编辑弹窗取消
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const Modal_Cancel = (event) => {
    setVisible(event);
  };
  /**
   * @date: 2024-10-06 20:29:34
   * @description: 新增/编辑弹窗确定接收的对象
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const PushData_Object = (event) => {
    console.log('新增/编辑弹窗确定接收的对象111111111', event);
    if (event.ModalType === 'add') {
      POST_Add_Commodity_Table_Data(event) // 商品表格数据新增
    } else {
      POST_Edit_Commodity_Table_Data(event) // 商品表格数据编辑
    }
  };
  /**
   * @date: 2024-10-06 20:30:24
   * @description: 删除表格数据
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const onDeleteClick = (event) => {
    console.log('删除表格数据', event);
    /**
     * @date: 2024-09-28 01:50:31
     * @functionName:     js
     * @param { type|* } ${参数名}: ${参数}
     * @description:删除User表格数据
     * @author: Forever丿顾北
     * @version: V1.0.5
    **/
    POST_Delete_Commodity_Table_Data_Api({
      id: event.id // id
    }).then(({data}) => {
      if (data.code === 200) {
        console.log('删除', data)
        message.success(
          data.msg, 
          [2], 
          Get_Commodity_Table_Data() // 获取表格数据
        )
      }
    })
  };
  /**
   * @date: 2024-10-06 20:35:43
   * @description: 重置
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const onResetFormClick = () => {
    Get_Commodity_Table_Data() // 获取表格数据
  };

  /**
   * @date: 2024-10-08 16:49:30
   * @functionName:   js
   * @param { Number | page} 当前页面
   * @param { Number | limit} 每页条数
   * @description:页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
   * @author: Forever丿顾北
   * @version: V1.0.5
  **/
  const onPaginationChange = (page, limit) => {
    Get_Commodity_Table_Data('', page, limit) // 获取表格数据
  };
  /**
   * @date: 2024-10-06 20:36:36
   * @description:获取表格数据
   * @author: Forever丿顾北
   * @param { TopFormSearch| String } 关键字
   * @param { page| Number } 当前页
   * @param { limit| Number } 每页数据
   * @author: Forever丿顾北
   * @version: V1.0.5
  **/
  const Get_Commodity_Table_Data = (TopFormSearch, page, limit) => {
    /**
     * @date: 2024-08-29 15:19:17
     * @description: 获取表格数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    Get_Commodity_Table_Data_Api({
      productName: TopFormSearch ? TopFormSearch : '', // 搜索
      page: page ? page : 1, // 当前页码
      limit: limit ? limit : PublicConfiguration.limit // 每页条数
    }).then(({data}) => {
      if (data.code === 200) {
        const {tableData} = data.data
        setDataSource(tableData)
      }
    })
  }

  /**
   * @date: 2024-10-06 20:38:33
   * @description:商品表格数据新增
   * @author: Forever丿顾北
   * @param { Object | PushData  } 提交参数对象
  **/
  const POST_Add_Commodity_Table_Data = (PushData) => {
    /**
     * @date: 2024-08-29 15:19:17
     * @description: 商品表格数据新增
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Add_Commodity_Table_Data_Api({
      productName: PushData.productName,
      productPrice: PushData.productPrice,
      productNum: PushData.productNum,
      productType: PushData.productType, 
      productDesc: PushData.productDesc
    }).then(({data}) => {
      if (data.code === 200) {
        message.success(
          data.msg, 
          [2], 
          Get_Commodity_Table_Data() // 获取表格数据
        )
      }
      setVisible(!Visible);
    })
  }
  /**
   * @date: 2024-10-06 20:41:11
   * @description:用户表格数据编辑
   * @author: Forever丿顾北
   * @param{ type }: ${参数}
   * @param { type|* } ${参数名}: ${参数}
   * @returns{ type|* }: ${返回参数}
  **/
  const POST_Edit_Commodity_Table_Data = (PushData) => {
    /**
     * @date: 2024-09-29 23:16:34
     * @description: 用户表格数据编辑
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Edit_Commodity_Table_Data_Api({
      id: PushData.id,
      productName: PushData.productName,
      productPrice: PushData.productPrice,
      productNum: PushData.productNum,
      productType: PushData.productType, 
      productDesc: PushData.productDesc
    }).then(({data}) => {
      console.log('编辑', data)
      if (data.code === 200) {
        message.success(
          data.msg, 
          [2], 
          Get_Commodity_Table_Data() // 获取表格数据
        )
      }
      setVisible(!Visible);
    })
  }

  /**
   * @date: 2024-10-06 20:42:04
   * @description: useEffect可以接受两个参数：一个函数和一个可选的依赖数组。该函数会在组件挂载后执行（首次渲染前），并在每次依赖数组中的值发生变化时重新执行。这使得它非常适合处理那些需要在组件生命周期的不同阶段进行的副作用操作。
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  useEffect(() =>{
    Get_Commodity_Table_Data() // 获取表格数据
  }, [])
  return (
    <div id="CommodityIndex">
      <Card hoverable className="Page_Index_card">
        <IndexTopForm onSearchClick={onSearchClick} onResetFormClick={onResetFormClick} onAddClick={onAddClick}/>
        <IndexTable dataSource={dataSource} onEditClick={onEditClick} onDeleteClick={onDeleteClick}/>
        <IndexPagination key={IndexPaginationKey} onPaginationChange={onPaginationChange}/>
      </Card>
      {/* 新增编辑弹窗 */}
      <IndexAddEidtForm IndexAddEidtTypeObject={IndexAddEidtTypeObject} Visible={Visible} Modal_Cancel={Modal_Cancel} PushData_Object={PushData_Object}/>
      {/* 新增编辑弹窗END */}
    </div>
  );
}

export default CommodityIndex;